<template>
  <div class="app-citys-list">
    <mt-index-list>
      <mt-index-section index="A">
        <mt-cell title="Aaron"></mt-cell>
        <mt-cell title="Alden"></mt-cell>
        <mt-cell title="Austin"></mt-cell>
      </mt-index-section>
      <mt-index-section index="B">
        <mt-cell title="Baldwin"></mt-cell>
        <mt-cell title="Braden"></mt-cell>
      </mt-index-section>...
      <mt-index-section index="Z">
        <mt-cell title="Zack"></mt-cell>
        <mt-cell title="Zane"></mt-cell>
      </mt-index-section>
    </mt-index-list>
  </div>
</template>

<script>
import { IndexList, IndexSection, Cell } from "mint-ui";
export default {
  components: {
    [IndexList.name]: IndexList,
    [IndexSection.name]: IndexSection,
    [Cell.name]: Cell
  },
  created() {
    // https://m.maizuo.com/gateway?k=5237159
    // console.log(Date.now());
    // this.$ajax({
    //   methods: "get",
    //   url: "https://m.maizuo.com/gateway?k=" + Date.now().toString().substr(-7)
    // })
    //   .then(res => {
    //     console.log(res);
    //   })
    //   .catch(err => {
    //     console.log(err);
    //   });
  }
};
</script>

<style lang="scss">
.mint-indexlist-nav,
.mint-indexsection,
.mint-cell,
.mint-indexlist-navitem {
  width: auto;
  height: auto;
}
.mint-indexsection-index {
  font-size: 28px;
}
.mint-cell-text {
  font-size: 0.426667rem;
}
.mint-cell {
  padding: 0.133333rem 0;
}
.mint-indexlist-navitem {
  font-size: 0.32rem;
}
</style>
